import React from 'react';
import {Row, Button, Col, Modal} from 'antd';
import qs from 'qs';
import BreadcrumbCustom from '../../../BreadcrumbCustom';
import * as Constant from "../../../../common/const";
import * as Request from '../../../../Server/Upgrade';
import {message} from "antd/lib/index";
import RegisterCollectInfoForm from "./CollectInfoForm";
import {AuthA,AuthButton} from '../../../auth/OperationAuth';
import TablePage from "../../../TablePage";

import {getPageParams} from '../../../../common/utils';

let defaultQuery = {page: Constant.DEFAULT_PAGE, size: Constant.DEFAULT_PAGE_SIZE};
const confirm = Modal.confirm;

class CollectInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            pagination: {},
            loading: false,
            title: undefined,
            visible: false,
            collectInfo: undefined
        };
    }

    componentWillMount() {
        const match = this.props.match;
        defaultQuery = {...defaultQuery, collectId: match.params.id};
    }

    componentDidMount() {
        this.fetchData();
    }

    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }


    fetchData = (params = defaultQuery) => {
        this.setState({
            loading: true
        });
        Request.collectInfoPage(qs.stringify(params)).then(res => {
            if (Constant.REQUEST_SUCCESS == res.code) {
                let data = res.data;
                this.setState({
                    dataSource: data.content,
                    pagination: {...this.state.pagination, total: data.totalSize, current: data.page + 1,pageSize:params.size},
                    loading: false,
                });
            }
        });
    }
    //新增
    add = () => {
        this.setState({
            title: '添加信息详情',
            visible: true,
            collectInfo: undefined
        })
    }

    //编辑
    edit = (id) => {
        Request.collectInfoGetById(id).then(res => {
            if (Constant.REQUEST_SUCCESS == res.code) {
                this.setState({
                    visible: true,
                    collectInfo: res.data,
                    title: '修改信息详情'
                });
            }
        });
    }
    //删除
    delete = (id) => {
        confirm({
            title: '删除提示',
            content: '确认删除该条信息',
            maskClosable: true,
            okText: '确定',
            okType: 'primary',
            cancelText: '取消',
            onOk: () => {
                Request.collectInfoDeleteById(qs.stringify({id: id, collectId: defaultQuery.collectId})).then(res => {
                    if (Constant.REQUEST_SUCCESS == res.code) {
                        this.fetchData({
                            ...getPageParams(this.state.pagination, true),
                            collectId: defaultQuery.collectId
                        });
                        message.success(Constant.DELETE_SUCCESS_TIP, Constant.AUTO_DISAPPEAR_TIME);
                    }
                })
            }
        });
    }
    cancel = (flag = false) => {
        if (typeof flag == 'object') {
            flag = false;
        }
        this.setState({
            visible: false
        });
        flag && this.fetchData({...getPageParams(this.state.pagination), collectId: defaultQuery.collectId});
    }
    /* 翻页 */
    handleTableChange = (pagination) => {
        const _this = this;
        const pager = {..._this.state.pagination};
        pager.current = pagination.current;
        pager.pageSize = pagination.pageSize;
        _this.setState({
            pagination: pager,
            loading: true
        });
        _this.fetchData({...getPageParams(pagination), collectId: defaultQuery.collectId});
    }

    goBack = () => {
        this.props.history.push({
            pathname: '/app/upgrade/common/collect',
            state:this.props.location.state,
        });
    }

    render() {

        const columns = [
            {
                title: "主键",
                dataIndex: "id",
                width: '14.285%',
                align: 'center',
            },
            {
                title: "收集信息",
                dataIndex: "idMain",
                width: '14.285%',
                align: 'center'
            },
            {
                title: "函数",
                dataIndex: "fun",
                width: '14.285%',
                align: 'center'
            },
            {
                title: "参数",
                dataIndex: "param",
                width: '14.285%',
                align: 'center'
            },
            {
                title: "外键",
                dataIndex: "collectId",
                width: '14.285%',
                align: 'center'
            },
            {
                title: "备注",
                dataIndex: "remark",
                width: '14.285%',
                align: 'center'
            },
            {
                title: "操作",
                width: '14.285%',
                align: 'center',
                render: (text, record) =>
                    (
                        <span>
                             <AuthA onClick={this.edit.bind(this, record.id)} className={'operation-primary'} permission={'collect:save'}>编辑</AuthA>
                             <AuthA onClick={this.delete.bind(this, record.id, record.name)}
                                className={'operation-danger'} permission={'collect:delete'}>删除</AuthA>
                         </span>
                    )
            }
        ];
        return (
            <div>
                <Row>
                    <BreadcrumbCustom first={'查看信息详情'}/>
                </Row>
                <Row>
                    <Col span={2} className={'button-margin'}>
                        <Button size={'large'} onClick={this.goBack} className={'ant-btn-large'}>
                            返回
                        </Button>
                    </Col>
                    <Col span={2} className={'button-margin'}>
                        <AuthButton size={'large'} onClick={this.add} className={'ant-btn-large'} permission={'collect:save'}>
                            添加信息
                        </AuthButton>
                    </Col>
                </Row>
                <Row>
                    <TablePage
                        dataSource={this.state.dataSource}
                        columns={columns}
                        rowKey={record => record.id}
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                        onChange={this.handleTableChange}
                    />
                </Row>
                <Row>
                    <Modal
                        title={this.state.title}
                        visible={this.state.visible}
                        footer={null}
                        onCancel={this.cancel}
                        maskClosable={false}
                        destroyOnClose={true}
                        centered={true}
                    >
                        <RegisterCollectInfoForm
                            cancel={this.cancel}
                            collectInfo={this.state.collectInfo}
                            collectId={defaultQuery.collectId}
                        />
                    </Modal>
                </Row>
            </div>
        );
    }
}

export default CollectInfo;